<template>
	<view class="rows p-left20 p-right20 p-top20 p-bot50" v-if="config.length" :style="{ '--color': color }">
		<block v-for="(item, index) in config" :key="item.config_id">
			<view class="row a-center m-bot20" v-if="item.config_id == 11207">
				<text class="size30 bold">{{ item.config_name }}</text>
				<input
					type="number"
					class="flex-1 input m-left20 p-left20"
					v-model="item.config_content"
					:placeholder="`请输入${item.config_name}`"
					placeholder-class="placeholder"
				/>
			</view>
		</block>

		<block v-for="(item, index) in config" :key="item.config_id">
			<view v-if="item.config_type == 1 && item.config_state == 1 && item.config_id != 11207">
				<!--  当行输入框 -->
				<view class="row a-center list">
					<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1 ? 'color' : 'color_F7'"></view>
					<input type="text" v-model="item.config_content" class="flex-1 m-left10 input" :placeholder="`请输入${item.config_name}`" placeholder-class="placeholder" />
				</view>

				<!--  获取验证码 -->
				<view class="row a-center list" v-if="item.config_id == 11205 && ordInfo.verification == 1">
					<view class="iconfont icon-a-lujing3094 color h7"></view>
					<input type="number" v-model="ordInfo.verCode" class="flex-1 m-left10 input" placeholder="请输入验证码" placeholder-class="placeholder" />
					<view class="Code flexac" @click="getCodeBtn">{{ isFlag ? '获取验证码' : `${dowtTime}S` }}</view>
				</view>
			</view>

			<!-- 下拉框 -->
			<view class="row a-center list" v-if="item.config_type == 2 && item.config_state == 1">
				<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1 ? 'color' : 'color_F7'"></view>
				<input
					type="text"
					disabled
					v-model="item.config_content"
					class="flex-1 m-left10 input"
					:placeholder="`请选择${item.config_name}`"
					placeholder-class="placeholder"
				/>
				<view class="iconfont icon-a-zujian7 color_B3 h7"></view>
				<picker mode="selector" :range="item.list" @change="choose($event, item.config_id)" class="picker"></picker>
			</view>

			<!-- 单选 -->
			<view class="Multiple" v-if="item.config_type == 9 && item.config_state == 1">
				<view class="d-flex a-center selectTitle">
					<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1 ? 'color' : 'color_F7'"></view>
					<text class="size26 color_80 m-left10">{{ item.config_name }}</text>
				</view>
				<view class="row">
					<block v-for="(subItem, subIndex) in item.list" :key="subIndex">
						<view class="d-flex a-center Single" :class="{ selectItem: subItem == item.config_content }" @click="SingleBtn(item.config_id, subItem)">
							<view class="singleBox flexac"><view class="minSingle"></view></view>
							<text class="color_64 size30 m-left10">{{ subItem }}</text>
						</view>
					</block>
				</view>
			</view>

			<!--  多选 -->
			<view class="Multiple" v-if="item.config_type == 5 && item.config_state == 1">
				<view class="d-flex a-center selectTitle">
					<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1 ? 'color' : 'color_F7'"></view>
					<text class="size26 color_80 m-left10">{{ item.config_name }}</text>
				</view>
				<view class="row f-wrap">
					<block v-for="(subItem, subIndex) in item.list" :key="subIndex">
						<view class="d-flex a-center selectList" :class="{ select: item.flagItem.indexOf(subItem) != -1 }" @click="choice(item.config_id, subItem)">
							<view class="box flexac"><view class="iconfont icon-xuanzhong white h6"></view></view>
							<text class="color_64 size30 m-left10">{{ subItem }}</text>
						</view>
					</block>
				</view>
			</view>

			<!--  日期 -->
			<timepicker @btnConfirm="btnConfirm2($event, item.config_id)" :showType="item.dateTimeType" v-if="item.config_type == 10 && item.config_state == 1">
				<view class="row a-center list">
					<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1 ? 'color' : 'color_F7'"></view>
					<input
						type="text"
						disabled
						class="flex-1 m-left10 input"
						v-model="item.config_content"
						:placeholder="`请选择${item.config_name}`"
						placeholder-class="placeholder"
					/>
					<view class="iconfont icon-a-zujian7 color_B3 h7"></view>
				</view>
			</timepicker>

			<!-- 省市区 -->
			<view class="row a-center list" @click="showAddPicker(item.config_id)" v-if="item.config_type == 6 && item.config_state == 1">
				<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1 ? 'color' : 'color_F7'"></view>
				<input
					type="text"
					disabled
					class="flex-1 m-left10 input"
					v-model="item.config_content"
					:placeholder="`请选择${item.config_name}`"
					placeholder-class="placeholder"
				/>
				<view class="iconfont icon-a-zujian7 color_B3 h7"></view>
			</view>

			<!-- 上传图片 -->
			<view class="Multiple" v-if="item.config_type == 8 && item.config_state == 1">
				<view class="d-flex a-center selectTitle">
					<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1 ? 'color' : 'color_F7'"></view>
					<text class="size26 color_80 m-left10">{{ item.config_name }}</text>
				</view>
				<view class="row">
					<block v-for="(subItem, subIndex) in item.imglist" :key="subIndex">
						<view class="imglist">
							<image :src="$imgUrls(subItem)" mode="aspectFill" class="wh bor_radius_10"></image>
							<image :src="$bossImg('1.png')" class="closeImg" @click.stop="delImg(item.config_id, subIndex)"></image>
						</view>
					</block>
					<view class="uploadImg flexac" @click="uploadImg(item.config_id, item.limit)" v-if="item.imglist.length < item.limit">
						<view class="iconfont icon-tianjia size54 color_cc"></view>
					</view>
				</view>
			</view>

			<!-- 备注 -->
			<view class="row bgf7 padding20 bor_radius_10 m-bot20" v-if="item.config_type == 4 && item.config_state == 1">
				<textarea
					disable-default-padding
					class="textarea"
					v-model="item.config_content"
					:placeholder="`请输入${item.config_name}`"
					placeholder-class="placeholder"
				></textarea>
			</view>
		</block>

		<view class="submit d-flex j-sb">
			<view class="subList flexac cancel size30" @click="cancelBtn">取消</view>
			<view class="subList flexac white bg33 size36" @click="subMit">{{ subText }}</view>
		</view>

		<mpvueCityPicker :shixian2="shixian2" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" @onCancel="shixian2 = false"></mpvueCityPicker>

		<showModel v-if="showModel" @hideModel="showModel = false"></showModel>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import timepicker from '@/components/time-picker.vue';
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
export default {
	name: 'from',
	props: ['order_id', 'v_id', 'VeriCode'],
	components: {
		timepicker,
		mpvueCityPicker
	},
	data() {
		return {
			color: getApp().globalData.color,
			showModel: false,
			ordId: 2266,
			dowtTime: 60,
			countdown: null,
			isFlag: true,
			ordInfo: '',
			config: '',
			check_info: '', //sncode_flag 0 审核中 2 审核拒绝
			shixian2: false,

			cityPickerValueDefault: [0, 0, 1], // 默认选择地址
			cityIndex: 0
		};
	},

	methods: {
		customForm() {
			this.$http
				.post({
					url: '/SRA_CustomerForm/customForm',
					data: {
						ordId: this.ordId,
						VeriCode: this.VeriCode ? this.VeriCode : this.bid,
						v_id: this.v_id ? this.v_id : this.vid
					}
				})
				.then((res) => {
					if (res.code != 100) return;
					let result = res.data;
					result.config.forEach((item, index) => {
						if (item.config_type == 2 || item.config_type == 5 || item.config_type == 9) {
							item.list = item.config_content.split('|');
							item.config_content = '';
							item.flagItem = [];
						}
						if (item.config_type == 8) {
							// 上传图片
							item.config_content = '';
							item.imglist = [];
						}
						if (item.config_type == 1 || item.config_type == 4 || item.config_type == 6 || (item.config_type == 10 && item.now_value)) {
							item.config_content = item.now_value;
						}
						if (item.config_type == 5 && item.now_value) {
							item.flagItem = item.now_value;
							item.config_content = item.now_value.toString();
						}
						if (item.config_type == 2 || (item.config_type == 9 && item.now_value)) item.config_content = item.now_value;
						if (item.config_type == 8 && item.now_value) {
							item.imglist = item.now_value;
							item.config_content = item.now_value.toString();
						}
					});
					if (this.userInfo.nickname) result.config[0].config_content = this.userInfo.nickname;
					if (this.userInfo.phone) result.config[1].config_content = this.userInfo.phone;
					this.config = result.config;
					if (result.ordInfo.verification == 1) result.ordInfo.verCode = '';
					this.ordInfo = result.ordInfo;
					if (result.check_info) this.check_info = result.check_info;
					this.$BarTitle(result.ordInfo.order_title);
				});
		},

		subMit() {
			if (this.check_info && this.check_info.sncode_flag == 0) return this.$Modal('提示', this.check_info.sncode_content);
			let popTxt = '不能为空';
			for (var i = 0; i < this.config.length; i++) {
				let item = this.config[i];
				if (item.config_type == 1 && item.config_content == '' && item.config_must == 1) {
					this.$Toast(item.config_name + popTxt);
					return false;
				}
				if (!this.$reg.phone.test(this.config[1].config_content) && i == 1 && this.config[1].config_content != '') {
					this.$Toast('请输入正确的手机号码！');
					return false;
				}
				if (item.config_type == 2 && item.config_must == 1 && item.config_content == '') {
					this.$Toast('请选择' + item.config_name + '!');
					return false;
				}
				if (item.config_type == 5 && item.config_must == 1 && item.config_content == '') {
					this.$Toast('请选择' + item.config_name + '!');
					return false;
				}
				if (item.config_type == 6 && item.config_must == 1 && item.config_content == '') {
					this.$Toast('请选择' + item.config_name + '!');
					return false;
				}
				if (item.config_type == 8 && item.config_must == 1 && item.config_content == '') {
					this.$Toast('请上传' + item.config_name + '!');
					return false;
				}
				if (item.config_type == 9 && item.config_must == 1 && item.config_content == '') {
					this.$Toast('请选择' + item.config_name + '!');
					return false;
				}
				if (item.config_type == 10 && item.config_must == 1 && item.config_content == '') {
					this.$Toast('请选择' + item.config_name + '!');
					return false;
				}
			}
			if (this.ordInfo.verCode == '' && this.ordInfo.verification == 1) return this.$Toast('请输入验证码!');

			let params = {
				VeriCode: this.VeriCode ? this.VeriCode : this.bid,
				ordId: this.ordId,
				jsCode: this.v_id ? this.v_id : this.vid,
				verification: this.ordInfo.verCode
			};
			this.config.forEach((item, index) => {
				let name = 'name' + index;
				params[name] = item.config_content;
			});
			this.$showLoading('提交中~');
			this.$http
				.post({
					url: '/zzj_singleSaleApi/addFrom',
					data: params
				})
				.then((res) => {
					this.$hideLoading();
					if (res.code != '100') return this.$Toast(res.data);
					if (res.jump_pay == 0) this.$Modal('提示', res.data);
					if (res.jump_pay == 2) {
						this.$Modal('支付', res.data).then((res1) => {
							if (res1) this.getPlayinfo(res.sncode_id);
						});
					}
					this.$emit('submit');
				});
		},

		getPlayinfo(sncode_id) {
			this.$http
				.post({
					url: '/accountPay/getSncodePay',
					data: {
						sncode_id: sncode_id
					}
				})
				.then((res) => {
					if (res.code != 100) return this.$Toast(res.msg);
					this.$getPayment(res.data).then((res1) => {
						if (res1) this.$Toast('支付成功');
					});
				});
		},

		// 日期
		btnConfirm2(event, id) {
			let index = this.config.findIndex((n) => n.config_id == id);
			this.config[index].config_content = event.key;
		},

		// 省市区
		showAddPicker(id) {
			let index = this.config.findIndex((n) => n.config_id == id);
			this.cityIndex = index;
			this.shixian2 = true;
		},
		onConfirm(event) {
			this.config[this.cityIndex].config_content = event.label;
			this.shixian2 = false;
		},

		choose(event, id) {
			let index = this.config.findIndex((n) => n.config_id == id);
			this.config[index].config_content = this.config[index].list[event.detail.value];
		},

		// 单选
		SingleBtn(id, item) {
			let index = this.config.findIndex((n) => n.config_id == id);
			this.config[index].config_content = item;
		},
		// 多选
		choice(id, item) {
			let index = this.config.findIndex((n) => n.config_id == id);
			if (this.config[index].flagItem.indexOf(item) == -1) {
				this.config[index].flagItem.push(item);
			} else {
				let indexof = this.config[index].flagItem.indexOf(item);
				this.config[index].flagItem.splice(indexof, 1);
			}
			this.config[index].config_content = this.config[index].flagItem.toString();
		},

		// 上传图片
		uploadImg(id, limit) {
			let that = this;
			let Index = this.config.findIndex((n) => n.config_id == id);
			let count = this.config[Index].imglist.length - limit;
			uni.chooseImage({
				count: count,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success(res) {
					that.$showLoading('上传中~');
					let tempFilePaths = res.tempFilePaths;
					tempFilePaths.forEach((item, index) => {
						that.$common.uploadFile(item).then((res1) => {
							that.$hideLoading();
							if (res1.errcode != 100) return that.$Toast('上传失败~');
							let imgItem = res1.url.substring(22, res1.url.length);
							let list = that.config[Index].imglist;
							list.push(imgItem);
							that.config[Index].config_content = that.config[Index].imglist.toString();
						});
					});
				}
			});
		},
		delImg(id, subIndex) {
			let Index = this.config.findIndex((n) => n.config_id == id);
			this.config[Index].imglist.splice(subIndex, 1);
		},
		getCodeBtn() {
			if (!this.vid) return (this.showModel = true);
			if (this.check_info && this.check_info.sncode_flag == 0) return this.$Modal('提示', this.check_info.sncode_content);
			if (!this.isFlag) return;
			let config_content = this.config[1].config_content;
			if (!config_content) return this.$Toast('请输入手机号码！');
			if (!this.$reg.phone.test(config_content)) return this.$Toast('手机号码输入有误！');
			this.$http
				.post({
					url: '/SRA_CustomerForm/verification_code',
					data: {
						ordId: this.ordId,
						phone: config_content
					}
				})
				.then((res) => {
					if (res.code != 1000) return this.$Toast(res.cont);
					this.isFlag = false;
					this.countdown = setInterval(() => {
						if (this.dowtTime > 1) return this.dowtTime--;
						clearInterval(this.countdown);
						this.isFlag = true;
					}, 1000);
				});
		},

		cancelBtn() {
			this.$emit('cancelUp');
		}
	},
	computed: {
		...mapState(['bid', 'vid', 'userInfo']),
		subText() {
			if (this.order_id != 2270) return this.ordInfo.price > 0 ? `支付${this.ordInfo.price}` : '立即报名';
			return this.ordInfo.order_title;
		}
	},
	watch: {
		order_id: {
			deep: true,
			immediate: true,
			handler(newVal) {
				if (!newVal) return;
				this.ordId = newVal;
				this.customForm();
			}
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: #f7f9fa;
}
</style>
<style lang="scss" scope>
.input {
	height: 80rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	overflow: hidden;
	font-size: 26rpx;
	color: #333333;
}
.Make {
	height: 90rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	overflow: hidden;
	position: relative;
	padding-left: 20rpx;
}
.Make::after {
	content: '';
	width: 10rpx;
	height: 32rpx;
	background-color: #000000;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
}
.list {
	height: 80rpx;
	background-color: #f7f9fa !important;
	border-radius: 10rpx;
	overflow: hidden;
	position: relative;
	padding-left: 20rpx;
	padding-right: 20rpx;
	margin-bottom: 20rpx;
}
.list input {
	background-color: #f7f9fa !important;
}
.icon-a-lujing3094 {
	zoom: 0.6;
}

.picker {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 101;
}
.Code {
	width: 156rpx;
	height: 56rpx;
	border-radius: 28rpx;
	background-color: #ffeff5;
	color: #e61616;
	font-size: 24rpx;
}
.Multiple {
	width: 100%;
	padding-bottom: 20rpx;
	margin-bottom: 20rpx;
	background-color: #f7f9fa;
	border-radius: 10rpx;
	overflow: hidden;
	position: relative;
}
.selectTitle {
	padding: 20rpx 20rpx 0 20rpx;
}
.selectList,
.Single {
	margin: 20rpx 30rpx 0 20rpx;
}
.selectList .box {
	width: 32rpx;
	height: 32rpx;
	border: 1rpx solid #ccc;
	border-radius: 4rpx;
}
.select .box {
	border: 1rpx solid var(--color);
	background-color: var(--color);
}
.Single .singleBox {
	width: 32rpx;
	height: 32rpx;
	border: 1rpx solid #ccc;
	border-radius: 50%;
}
.Single .minSingle {
	width: 14rpx;
	height: 14rpx;
	border-radius: 50%;
	background-color: #ffffff;
}
.selectItem .singleBox {
	border: 1rpx solid #e61616;
}
.selectItem .minSingle {
	background-color: #e61616;
}
.imglist {
	width: 150rpx;
	height: 150rpx;
	position: relative;
	background-color: #ffffff;
	border-radius: 10rpx;
	margin-left: 20rpx;
	margin-top: 30rpx;
}
.closeImg {
	width: 32rpx;
	height: 32rpx;
	position: absolute;
	top: -10rpx;
	right: -10rpx;
}
.uploadImg {
	width: 150rpx;
	height: 150rpx;
	margin-left: 20rpx;
	margin-top: 30rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	border: 1rpx solid #cccccc;
}
.textarea {
	width: 100%;
	height: 240rpx;
	padding-left: 12rpx;
	font-size: 26rpx;
	color: #333333;
	position: relative;
}
.textarea::after {
	content: '';
	width: 2rpx;
	height: 24rpx;
	background-color: #000000;
	position: absolute;
	left: 0;
	top: 19rpx;
	transform: translate(0, -50%);
}
.agree {
	width: 32rpx;
	height: 32rpx;
	background-color: #ffffff;
	border: 1rpx solid #ccc;
	border-radius: 4rpx;
}
.submit {
	width: 100%;
	padding: 0 30rpx;
	margin: 56rpx auto 0;
}
.subList {
	width: 270rpx;
	height: 87rpx;
	border-radius: 10rpx;
}
.cancel {
	border: 1px solid #333333;
}
</style>
